<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <title>宠物领养平台</title>
    <style>
        .card:hover {
            transform: translateY(-5px);
            transition: transform 0.3s ease;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="/index.html">首页</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="/adopt.html">我的领养</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/person.html">个人信息</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="/logout">退出</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container mt-4">
    <div class="row" id="petContainer">

    </div>
</div>

<script src="/js/jquery.min.js"></script>
<script>
    $.ajax({
        url: '/pets',
        method: 'GET',
        success: function (data) {
            data.forEach(function (pet) {
                var cardHtml = '<div class="col-md-4 mb-4" style="cursor: pointer;"  onclick="detail(' + pet.id + ')">' +
                    '<div class="card">' +
                    '<img src="' + pet.image + '" class="card-img-top" alt="宠物图片">' +
                    '<div class="card-body">' +
                    '<h5 class="card-title">' + pet.name + '</h5>' +
                    '<p class="card-text">状态：' + pet.status + '</p>' +
                    '</div>' +
                    '</div>' +
                    '</div>';

                $('#petContainer').append(cardHtml);
            });
        },
        error: function (error) {
            console.error('出错:', error);
        }
    });

    function detail(id) {
        window.location.href = "/detail.html?id=" + id
    }
</script>
</body>
</html>
